<template>
  <div class="permissionTableClass">
     <div class="searchArea">
           <div>
               <div>功能模块名称:</div>
               <el-input
                 style="margin-left:5px"
                  placeholder="请输入内容"
                  v-model="mdouleName"
                  clearable>
               </el-input>
            </div>
          <el-button type="primary" size="mini" style="margin-left:10px"  icon="el-icon-search">搜索</el-button>
          <el-button  size="mini" icon="el-icon-reset">重置</el-button>
     </div>
     <el-table
          ref="multipleTable"
           v-loading="loading"
          :data="tableData"
          tooltip-effect="dark">
           <el-table-column label="功能模块名称">
               <template slot-scope="scope">{{ scope.row.moduleName }}</template>
           </el-table-column> 
           <el-table-column label="权限字段设置">
               <template slot-scope="scope"><span class="permissionField" @click="setPermissionField(scope.row)">权限字段设置</span></template>
           </el-table-column>
            <el-table-column label="列功能权限设置">
               <template slot-scope="scope"><span class="permissionField" @click="setCloumnPermission(scope.row)">列功能权限设置</span></template>
            </el-table-column>
            <el-table-column label="行功能权限设置" width="300">
               <template slot-scope="scope"><span class="permissionField" @click="setRowPermission(scope.row)">行功能权限设置</span></template>
            </el-table-column>
        </el-table>
        <el-pagination
            background
            layout="prev, pager, next"
            :total="total">
         </el-pagination>
         <permission-field-setting-dialog :params="params" @close="close" v-if="isShowPermissionFieldSettingDialog"/>
         <permission-column-setting-dialog :params="params" @close="close" v-if="isShowPermissionColumnSettingDialog"/>
         <permission-row-setting-dialog :params="params" @close="close" v-if="isShowPermissionRowSettingDialog"/>
  </div>
</template>
<script lang="ts">
 
import { Component, Vue,Inject} from 'vue-property-decorator';
import PermissionApi from "@/api/permission-api";
import PermissionFieldSettingDialog from "@/components/permission-setting/dialog/permission-field-setting-dialog.vue";
import PermissionColumnSettingDialog from "@/components/permission-setting/dialog/permission-column-setting-dialog.vue";
import PermissionRowSettingDialog from "@/components/permission-setting/dialog/permission-row-setting-dialog.vue";
@Component({
  components: {
     PermissionFieldSettingDialog,
     PermissionColumnSettingDialog,
     PermissionRowSettingDialog
  },
})
export default class ToDoList extends Vue {
     @Inject() tabIndexRef!: any;
     private params:any={};
     private loading:boolean=false;
     private tableData:Array<any>=new Array<any>();
     private mdouleName:any="";
     private total:any=0;
     private isShowPermissionFieldSettingDialog:boolean=false;
     private isShowPermissionColumnSettingDialog:boolean=false;
     private isShowPermissionRowSettingDialog:boolean=false;
     async created(){
          this.loading=true;
          let tableData=await PermissionApi.getPermissionList({});
          this.tableData=tableData.rows;
          this.total=tableData.pageInfo.total;
          this.loading=false;
     }
     private setPermissionField(scope:any){
          this.params.rowData=scope;
          this.isShowPermissionFieldSettingDialog=true;
     }
     private setCloumnPermission(scope:any){
          this.params.rowData=scope;
          this.isShowPermissionColumnSettingDialog=true;
     }
     private setRowPermission(scope:any){
          this.params.rowData=scope;
          this.isShowPermissionRowSettingDialog=true;
     }
     private close(){
           this.isShowPermissionFieldSettingDialog=false;
           this.isShowPermissionColumnSettingDialog=false;
           this.isShowPermissionRowSettingDialog=false;
     }
}
</script>
<style lang="less">
    .permissionTableClass{
        background-color: #f3f3f4;
        height: 100%;
        width: 100%;
        display: flex;
        flex-direction: column;
        .el-tabs__header{
             margin: 0 0 0px;
        }
        .searchArea{
               margin-top: 5px;
               margin-bottom: 5px;
               width: calc(100% - 10px);
               margin-left: 2px;
               background: #fff;
               box-shadow: 1px 1px 3px rgb(0 0 0 / 20%);
               display: flex;
               padding: 10px 0px;
               font-size: 13px;
               >div{
                  display: flex;
                  margin-left: 15px;
                  >div{
                      white-space:nowrap;   
                      display: flex;
                      align-items: center;
                  }
               }
              .el-input__inner{
                   height: 30px;
              }
        }
       .el-pagination{
            padding-top: 10px;
            padding-bottom: 5px;
            background-color: white;
        }
        .permissionField{
            color: #409EFF;
            cursor: pointer;
        }
       .el-dialog{
             width: 1100px;
             height: 580px;
        }
    }
</style>
